<template>
    <div class="wrapper">
        <h1>PropsZi-5-Refs</h1>
        <h2>玩具：{{ toy }}</h2>
        <h2>书籍：{{ book }}</h2>
        <!-- $parent关键字获取父组件defineExpose暴露的数据 -->
        <button @click="saleHouse($parent)">卖掉一套房</button>
    </div>
</template>

<script lang="ts" setup name="PropsZi5Refs">
import { ref } from 'vue'
let toy = ref('奥特曼')
let book = ref(6)

function saleHouse(parent: any) {
    // 响应式对象，无需.value
    parent.house -= 1
}

// 对外暴露数据
defineExpose({ toy, book })

</script>


<style scoped>
.wrapper {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

input {
    border: 2px solid black;
    background-image: linear-gradient(45deg, red, yellow, green);
    height: 30px;
    font-size: 20px;
    color: white;
}
</style>